<?php 

	$adress 	= isset($adress) ? $adress : '';
	$lon 		= isset($lon) ? $lon : '';
	$lat 		= isset($lat) ? $lat : '';
	$action 	= isset($action) ? $action : '';
	$fields		= isset($fields) ? $fields : null;
	
?>


  <div id="map">
    <div id="map_canvas" style="width:600px; height:400px"></div>

    <div id="crosshair"></div>
  </div>


<style type="text/css">
  div#map {
    position: relative;
  }

  div#crosshair {
    position: absolute;
    top: 192px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
    background: url(/modules/GoogleMaps/v/crosshair.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
		
<script type="text/javascript">

	var map;
	var geocoder;
	var centerChangedLast;
	var reverseGeocodedLast;
	var currentReverseGeocodeResponse;


  $(function() 
  {		
	    var myOptions = {
	    	      zoom: 15,
	    	      center: new google.maps.LatLng(<?php echo $lat.",".$lon;?>),
	    	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    	    };

		
		map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
				
		geocoder = new google.maps.Geocoder();

		setupEvents();
	});  

  	function setupEvents() 
  	{
	    google.maps.event.addListener(map, 'center_changed', centerChanged);

	    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
	       map.set_zoom(map.get_zoom() + 1);
	    });

	  }

	  function getCenterLatLngText() {
	    return 'Lat = ' + map.get_center().lat() +', Lon = '+ map.get_center().lng();
	  }
	
	  function centerChanged() 
	  {
		centerChangedLast = new Date();
		var latlng = getCenterLatLngText();
		
		document.getElementById('latlng').innerHTML = latlng;

		$('#gm-lat').attr('value',map.get_center().lat());
		$('#gm-lon').attr('value',map.get_center().lng());
	  }
			
	
	var points;
	
	function showAddress() 
	{
		var address = $("#eb-txtAdresse").attr("value") + ",France";

	  	if (geocoder) 
	  	{
		  geocoder.geocode({
	      'address': address,
	      'partialmatch': true}, 
	      geocodeResult);
  		}
	}

	function validateGoogleMapsForm()
	{		
		$('#eb-form-google-maps').submit();
	}

  	function geocodeResult(results, status) 
  	{
	    if (status == 'OK' && results.length > 0) 
		{
	      map.fitBounds(results[0].geometry.viewport);
	    } 
	    else 
		{
	      alert("Adresse non trouvée: " + status);
	    }
	  }
	
	
</script>

<form id="eb-form-google-maps" action="<?php echo $action ?>" method="POST">
	<input type="hidden" id="ref" name="ref" value="<?php echo EbController::$request->url; ?>" />
	<?php 
		if (!is_null($fields))
		{
			eb_widget('list',array('dataProvider' => $fields,'itemRenderer' => '<input type="hidden" name="$name" value="$value" />'));
		}
	?>	
	
	<input type="hidden" id="gm-lon" name="lon" value="<?php echo $lon; ?>" />
	<input type="hidden" id="gm-lat" name="lat" value="<?php echo $lat; ?>" />
	<table style="width:100%;">
		<tr>
			<td>Adresse:</td>
			<td><input type="text" id="eb-txtAdresse" style="width:80%;" value="<?php echo $adress; ?>" /></td>
			<td><input type="button" value="Chercher" onclick="showAddress()" /></td>
		</tr>		
		<tr>
			<td colspan="3">
				<div id="latlng"><?php echo "Lat = $lat, Lon = $lon"; ?></div>
			</td>
		</tr>
		<tr>
			<td colspan="3" align="center">
				<a class="eb-button" href="#" onclick="validateGoogleMapsForm();"><span class="eb-add">Valider</span></a>
			</td>
		</tr>		
	</table>
</form>